<template>
	<view >
		<view class="imgbox-content" v-if="imglist.length>0">
			<view class="imgbox" v-for="(item,index) in imglist" :key="index" >
				<image :src="item.mediaUrl" mode="aspectFill" @click="lookPic(item.mediaUrl,imglist)"></image>
				<view class="delete-img-icon  " @click="deleteImg(item)">
					<uni-icons type="trash" size="16" color="#fff"></uni-icons>
				</view>
			</view>
		</view>
		
		<empty v-else></empty>
		<div class="uploadBtn bottom-change-view" @click="uploadImg">
			<uni-icons type="plusempty" size="30" color="#fff"></uni-icons>
		</div>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/config/config.js'
	import {errorToShow} from "@/config/common.js"
	import empty from "@/components/empty.vue"
	import {queryMakeFriendsMedia,savePic,delFile} from "@/constant/friend.js"
	export default {
		components:{
			empty
		},
		data() {
			return {
				imglist:[],
				list: [],
				imgList: [],
				maxImg: 9
			}},
				onLoad() {
					this.getPic()
				},
			methods:{
				lookPic(url,list){
				
						
						let imgarr=this.imglist.map(item=>item.mediaUrl)
						
						uni.previewImage({
							urls:imgarr,
							current: url,
							longPressActions: {
											itemList: ['转发给朋友', '保存图片', '删除'],
											success: function(data) {
												console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
											},
											fail: function(err) {
												console.log(err.errMsg);
											}
										}
						})
					
				},
				getPic(){
					console.log(uni.getStorageSync('customerInfo'))
					let info= uni.getStorageSync('customerInfo')
					let id=info.id
					queryMakeFriendsMedia(id).then(res=>{
						this.imglist=res.data.makeFriendsMediaList||[]
					})
				},
			
				uploadImg() {
					uni.chooseImage({
						count: this.maxImg - this.list.length,
						sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
						// sourceType: ['album'], //从相册选择
						success: (res) => {
							if (this.imgList.length != 0) {
								this.imgList = this.imgList.concat(res.tempFilePaths)
							} else {
								this.imgList = res.tempFilePaths
							}
							console.log(this.imgList)
							this.submit()
						}
					});
				},
				ViewImage(e) {
					uni.previewImage({
						urls: this.imgList,
						current: e.currentTarget.dataset.url
					});
				},
				deleteImg(item) {
					uni.showModal({
						title: '提示',
						content: '确定要删除吗？',
						cancelText: '取消',
						confirmText: '确定',
						success: res => {
							if (res.confirm) {
								delFile(item.mediaUrl).then(res=>{
									this.getPic()
								})
								
							}
						}
					})
				},
				async submit() {
					uni.showLoading({
						title: '图片上传中...',
						mask: true
					})
					let result = await this.uploads()
					// this.list = this.list.concat(result)
					// this.savePicto(result)
					uni.hideLoading()
				},
				//小程序不支持多文件上传
				async uploads() {
					const that = this
					let arr = []
					for (let k in that.imgList) {
						let result = await that.up_img(that.imgList[k])
						if (result) {
							// let path = result.substring(result.lastIndexOf("/") + 1)
							// let url = that.tui.imgUrl() + 'etoyoMallApi/file/getFile?filename=' + path
							let url = result
							arr.push(result.fileName)
							that.imgList[k] = result.url
						}
					}
					return arr;
				},
				up_img(url) {
					const that = this
					return new Promise((resolve, reject) => {
						if (url.indexOf('profile') !== -1) {
							resolve(false)
						} else {
							console.log(url,'-----')
							uni.uploadFile({
								url: baseUrl + '/common/upload',
								filePath: url,
								name: 'file',
								// header: {
									// 'Authorization':that.tui.getToken()? "Bearer "+that.tui.getToken():""
								// },
								success: (uploadFileRes) => {
									console.log(jsonResult,uploadFileRes)
									let jsonResult = JSON.parse(uploadFileRes.data)
									if (jsonResult.code != 0) return
									
									this.savePicto(jsonResult.url)
									resolve(jsonResult)
								},
								complete: (res)=> {
									console.log(res)
								}
							});
						}
					})
				},
				savePicto(img){
					let params={
						"mediaUrls": [img],
					"videoUrl":'',
					}
					savePic(params).then(res=>{
						if(res.code==500){
							errorToShow(res.msg)
						}
						this.getPic()
					})
				}
				
			}}
</script>

<style lang="scss" scoped>
	.delete-img-icon{
		position: absolute;
		bottom:0;
		width: 100%;
		height: 40rpx;
		background-color: rgba(0,0,0,0.4);
		text-align: center;
		line-height: 40rpx;
	}
	.imgbox{
		width: 48%;
		height: 360rpx;
		flex-shrink: 0;
		margin-bottom: 20rpx;
		position: relative;
		&:nth-child(2n-1){
			margin-right: 4%;
		}
		image{
			border-radius: 10rpx;
			width: 100%;
			height: 100%;
		}
	}
	.imgbox-content{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding:32rpx
	}
	.uploadBtn{
		position: fixed;
		bottom:30rpx;
		right:30rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		// background: linear-gradient(270deg, #783CF9 0%, #FD83C8 100%);
	}
</style>